<template>
  <el-col>
    <el-card class="card">
    <div ref="map" style="width: 1550px; height: 1000px" />
    </el-card>
  </el-col>
</template>

<script>
import * as echarts from "echarts";
import ZH from "./ZH.json";
export default {
  name: "CustomerManger",
  // 挂载地图实例
  mounted() {
    var myChart = echarts.init(this.$refs.map);
    echarts.registerMap("ZH", ZH);
    var geoCoordMap = {
      广州市: [113.507649675, 23.3200491021],
      衡阳市: [112.982279, 28.19409],
      重庆市: [106.504962, 29.533155],
      大理市: [102.712251, 25.040609],
      台北市: [121.509062, 25.044332],
      香港市: [114.173355, 22.320048],
      大庆市: [126.642464, 45.756967],
      沈阳市: [123.429096, 41.796767],
      吉林市: [125.3245, 43.886841],
      呼伦贝尔市: [111.670801, 40.818311],
      北京市: [116.405285, 39.904989],
      乌鲁木齐市: [87.617733, 43.792818],
      石家庄市: [114.502461, 38.045474],
      拉萨市: [91.132212, 29.660361],
      西宁市: [101.778916, 36.623178],
      成都市: [104.065735, 30.659462],
      桂林市: [108.320004, 22.82402],
      贵阳市: [106.713478, 26.578343],
      厦门市: [119.306239, 26.075302],
      上海市: [121.472644, 31.231706],
      合肥市: [117.283042, 31.86119],
      武汉市: [114.298572, 30.584355],
      南昌市: [115.892151, 28.676493],
      兰州市: [103.823557, 36.058039],
      海口市: [110.33119, 20.031971],
      南京市: [118.767413, 32.041544],
      济南市: [117.000923, 36.675807],
    };
    var customerBatteryCityData = [
      { name: "广州市", value: 180 },
      { name: "衡阳市", value: 700 },
      { name: "重庆市", value: 500 },
      { name: "大理市", value: 250 },
      { name: "台北市", value: 160 },
      { name: "香港市", value: 130 },
      { name: "大庆市", value: 190 },
      { name: "沈阳市", value: 300 },
      { name: "吉林市", value: 500 },
      { name: "呼伦贝尔市", value: 330 },
      { name: "北京市", value: 110 },
      { name: "乌鲁木齐市", value: 170 },
      { name: "石家庄市", value: 160 },
      { name: "拉萨市", value: 220 },
      { name: "西宁市", value: 210 },
      { name: "成都市", value: 200 },
      { name: "桂林市", value: 500 },
      { name: "贵阳市", value: 600 },
      { name: "厦门市", value: 370 },
      { name: "上海市", value: 120 },
      { name: "合肥市", value: 530 },
      { name: "武汉市", value: 430 },
      { name: "南昌市", value: 330 },
      { name: "兰州市", value: 330 },
      { name: "海口市", value: 130 },
      { name: "南京市", value: 130 },
      { name: "济南市", value: 130 },
    ];
    var option = {
      title: {
        text: "销售数量增长", // 标题的内容
        textStyle: {
          // 设定文字的样式
          fontSize: 30,
          color: "white",
        },
      },
      backgroundColor: "#131C38",
      tooltip: {
        // borderWidth: 0,
        trigger: "item",
        show: true,
        enterable: true,
        textStyle: {
          fontSize: 20,
          color: "#CAFFFF",
        },
        backgroundColor: "rgba(0,2,89,0.8)",
        formatter: "{b}<br />{c}",
      },
      geo: [
        {
          map: "ZH",
          aspectScale: 0.9,
          roam: false, // 是否允许缩放
          zoom: 1.2, // 默认显示级别
          layoutSize: "95%",
          layoutCenter: ["55%", "50%"],
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear-gradient",
                x: 0,
                y: 400,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0072E3", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0072E3", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              borderColor: "#fbc2eb",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: {
                type: "linear-gradient",
                x: 0,
                y: 300,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#fa709a", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fee140", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
            },
          },
          emphasis: {
            itemStyle: {
              areaColor: "#0160AD",
            },
            label: {
              show: 0,
              color: "#fff",
            },
          },
          zlevel: 3,
        },
        {
          map: "ZH",
          aspectScale: 0.9,
          roam: false, // 是否允许缩放
          zoom: 1.2, // 默认显示级别
          layoutSize: "95%",
          layoutCenter: ["55%", "50%"],
          itemStyle: {
            normal: {
              borderColor: "rgba(192,245,249,.6)",
              borderWidth: 2,
              shadowColor: "#2C99F6",
              shadowOffsetY: 0,
              shadowBlur: 120,
              areaColor: "rgba(29,85,139,.2)",
            },
          },
          zlevel: 2,
          silent: true,
        },
        {
          map: "ZH",
          aspectScale: 0.9,
          roam: false, // 是否允许缩放
          zoom: 1.2, // 默认显示级别
          layoutSize: "95%",
          layoutCenter: ["55%", "51.5%"],
          itemStyle: {
            // areaColor: '#005DDC',
            areaColor: "rgba(0,27,95,0.4)",
            borderColor: "#004db5",
            borderWidth: 1,
          },
          zlevel: 1,
          silent: true,
        },
      ],
      series: [
        {
          geoIndex: 0,
          // coordinateSystem: 'geo',
          showLegendSymbol: true,
          type: "map",
          roam: true,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
          },

          itemStyle: {
            normal: {
              borderColor: "#2ab8ff",
              borderWidth: 1.5,
              areaColor: "#12235c",
            },
            emphasis: {
              areaColor: "#2AB8FF",
              borderWidth: 0,
              color: "red",
            },
          },
          map: "ZH", // 使用
          data: customerBatteryCityData,
          // data: this.difficultData // 热力图数据   不同区域 不同的底色
        },
        {
          type: "lines",
          zlevel: 5,
          effect: {
            show: false,
            // period: 4, //箭头指向速度，值越小速度越快
            // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            // symbol: 'arrow', //箭头图标
            // symbol: imgDatUrl,
            symbolSize: 5, // 图标大小
          },
          lineStyle: {
            width: 17, // 尾迹线条宽度
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(199,145,41)", // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: "rgb(199,145,41)", // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: "rgb(223,176,32)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgb(223,176,32)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgb(199,145,41)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            opacity: 1, // 尾迹线条透明度
            curveness: 0, // 尾迹线条曲直度
          },
          label: {
            show: 0,
            position: "end",
            formatter: "245",
          },
          silent: true,
          data: lineData(),
        },
        {
          type: "scatter",
          coordinateSystem: "geo",
          geoIndex: 0,
          zlevel: 5,
          label: {
            show: false,
            position: "bottom",
            formatter: (params) => this.data[params.dataIndex].value,
            padding: [4, 8],
            backgroundColor: "#fff",
            borderRadius: 5,
            borderColor: "	#B15BFF",
            borderWidth: 1,
            color: "	#B15BFF",
          },
          symbol: "diamond",
          symbolSize: [17, 8],
          itemStyle: {
            color: "#ffd133",
            opacity: 1,
          },
          silent: true,
          data: scatterData(),
        },
        {
          type: "scatter",
          coordinateSystem: "geo",
          geoIndex: 0,
          zlevel: 4,
          label: {
            formatter: "{b}",
            position: "bottom",
            color: "#fff",
            fontSize: 12,
            distance: 10,
            show: true,
          },
          symbol: "diamond",
          symbolSize: [17, 8],
          itemStyle: {
            // color: '#F7AF21',
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(199,145,41)", // 0% 处的颜色
                },
                {
                  offset: 0.3,
                  color: "rgb(199,145,41)", // 30% 处的颜色
                },
                {
                  offset: 0.5,
                  color: "rgb(223,176,32)", // 50% 处的颜色
                },
                {
                  offset: 1,
                  color: "	#921AFF", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            opacity: 1,
            // shadowColor: '#fff',
            // shadowBlur: 5,
            // shadowOffsetY: 2
          },
          silent: true,
          data: scatterData2(),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          geoIndex: 0,
          symbol: "circle",
          symbolSize: 4,
          showEffectOn: "render",
          rippleEffect: {
            brushType: "fill",
            scale: 10,
          },
          hoverAnimation: true,
          label: {
            // formatter: (p) => {
            //   console.log(p, 99999)
            //   return p.data[2]
            // },
            formatter: "{b}",
            position: "bottom",
            color: "#fff",
            fontSize: 14,
            distance: 10,
            show: true,
          },
          itemStyle: {
            color: "#bacac6",
          },
          zlevel: 5,
          data: this.scatterData2,
        },
      ],
    };
    myChart.setOption(option);
    // 动态计算柱形图的高度（定一个max）
    function lineMaxHeight() {
      const maxValue = Math.max(
        ...customerBatteryCityData.map((item) => item.value)
      );
      return 10 / maxValue;
    }
    // 柱状体的主干
    function lineData() {
      return customerBatteryCityData.map((item) => {
        return {
          coords: [
            geoCoordMap[item.name],
            [
              geoCoordMap[item.name][0],
              geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
            ],
          ],
        };
      });
    }
    // 柱状体的顶部
    function scatterData() {
      return customerBatteryCityData.map((item) => {
        return [
          geoCoordMap[item.name][0],
          geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
        ];
      });
    }
    // 柱状体的底部
    function scatterData2() {
      return customerBatteryCityData.map((item) => {
        return {
          name: item.name,
          value: geoCoordMap[item.name],
        };
      });
    }
  },
};
</script>

<style lang="scss" scoped>

.card{
    width: 100vw;
    height: 100vh;
    margin: 20px 50px 0 0;
    overflow: hidden;
    div{
        border-radius: 5px;
    }
}
</style>
